<template>
	<view class="info-job" :style="'height:'+ screenHeight +'px !important;'">
		<uni-nav-bar color="#ffffff" background-color="#007AFF" :status-bar="true" left-icon="arrowleft" title="行业设置"  right-text="保存" @clickLeft="back" @clickRight="savejob"/>
		<view class="info-job-list">
			<view class="info-job-list-left">
				行业类型
			</view>
			<view class="info-job-list-right">
				<picker @change="bindPickerChange" :value="typeIndex" :range="hyType">
					<view class="job-tips" v-show="typeDisplay">
						<text style="color: #9BA8B7;" >请选择</text>
						<uni-icons type="arrowdown" size="15" color="#9BA8B7"></uni-icons>
					</view>
					<view class="uni-input" v-show="!typeDisplay">{{hyType[typeIndex]}}</view>
				</picker>
			</view>
		</view>
		<view class="info-job-list">
			<view class="info-job-list-left">
				单位地址
			</view>
			<view class="info-job-list-right">
				<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
					<view class="job-tips" v-show="dwDisplay">
						<text style="color: #9BA8B7;" >请选择</text>
						<uni-icons type="arrowdown" size="15" color="#9BA8B7"></uni-icons>
					</view>
					<text class="info-address-result">{{regionName}}</text>
				</pick-regions>
			</view>
		</view>
		<view class="info-job-list">
			<view class="info-job-list-left">
				名称
			</view>
			<view class="info-job-list-right">
				<picker @change="namePickerChange" :value="nameIndex" :range="gsName">
					<view class="job-tips" v-show="gsDisplay">
						<text style="color: #9BA8B7;" >请选择</text>
						<uni-icons type="arrowdown" size="15" color="#9BA8B7"></uni-icons>
					</view>
					<view class="uni-input" v-show="!gsDisplay">{{gsName[nameIndex]}}</view>
				</picker>
			</view>
		</view>
		<view class="info-job-list">
			<view class="info-job-list-left">
				职务
			</view>
			<view class="info-job-list-right">
				<picker @change="dutyPickerChange" :value="dutyIndex" :range="dutyArr">
					<view class="job-tips" v-show="zwDisplay">
						<text style="color: #9BA8B7;" >请选择</text>
						<uni-icons type="arrowdown" size="15" color="#9BA8B7"></uni-icons>
					</view>
					<view class="uni-input" v-show="!zwDisplay">{{dutyArr[dutyIndex]}}</view>
				</picker>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeDisplay:true,
				dwDisplay:true,
				gsDisplay:true,
				zwDisplay:true,
				screenHeight: '',
				typeIndex: 0,
				hyType: ['计算机/互联网','农、牧、林、渔业', '采矿和采石', '制造业', '电、煤气、蒸汽和空调供应'],
				region:[],
				defaultRegion:['广东省','广州市','番禺区'],
				defaultRegionCode:'440113',
				nameIndex:0,
				gsName:['AAAAAAAA','BBBBBB','CCCCCCCCCC','DDDDDDDDDDD'],
				dutyIndex:0,
				dutyArr:['经理','总监','职员','其他']
			}
		},
		onLoad() {
		    this.screenHeight = uni.getSystemInfoSync().windowHeight;
		},
		computed:{
		    regionName(){
		        // 转为字符串
				var str=this.region.map(item=>item.name).join(' ')
				if(str.length>0){
					this.dwDisplay=false;
				}else{
					this.dwDisplay=true;
				}
		        return str;
		    }
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.typeIndex = e.target.value;
				this.typeDisplay=false;
			},
			// 获取选择的地区
			handleGetRegion(region){
			    this.region = region
			},
			namePickerChange(e){
				this.nameIndex = e.target.value;
				this.gsDisplay=false;
			},
			dutyPickerChange(e){
				this.dutyIndex=e.target.value;
				this.zwDisplay=false;
			},
			back(){
				uni.navigateTo({
					url:"./user/info"
				})
			},
		}
	}
</script>

<style scoped lang="less">
	@import url("../../../static/color.less");
	.info-job{
		width: 100%;
		height: 100%;
		background-color: @colorLightGray;
	}
	.info-job-list{
		display: flex;
		padding: 25rpx;
		justify-content: space-between;
		background-color: @colorWrite;
		margin-top: 10rpx;
	}
	
</style>
